<template>
	<a-select 
		v-model:value 		= 'value' 
		:size 				= 'size' 
		:placeholder 		= "readOnly ? '--' : p" 
		:loading 			= 'ajax.loading' 
		:allowClear 		= 'allowClear'
		:showSearch 		= 'showSearch'
		:mode 				= "multiple ? 'tags' : null"
		:maxTagCount 		= 'count'
		:style 				= '{minWidth:vn.setPx(width)}'
		:filterOption 		= 'filterOption'
		@change 			= 'onChange'
	>
		<a-select-option v-for='(v,i) of ajax.data' :value='v[idStr]' :key='i'>{{v[nameStr]}}</a-select-option>
	</a-select>
</template>

<script>
	import { ref, watch } from 'vue'
	import { Select } from 'ant-design-vue'
	app.use(Select)
	export default{
		props:{
			value 		: [Number, String, Array],
			name 		: String,
			label 		: String,
			form 		: Object,
			p			: { type:String },
			icon		: null,
			size		: String,
			allowClear  : { type:Boolean, default:({ readOnly }) => !readOnly},
			data		: { type:Array, default: [] },
			api 		: String,
			idStr 		: { type: String, default: $config.idStr },
			nameStr 	: { type: String, default: $config.nameStr },
			cache 		: Boolean,
			readOnly	: Boolean,
			param 		: [Object, Number, Boolean],
			paging 		: [Number, Boolean],
			multiple 	: Boolean,
			showSearch 	: { type:Boolean, default:true },
			count 		: { type:Number, default:3 },
			width 		: [String, Number ],
			sname 		: String,
			formRef 	: null
		},
		emits:{
			change:null,
			'update:value':null,
			init: null,
			getData: null
		},
		setup(props, ctx){
			const { data, sname, formRef } = props
			const ajax = ref({ data })
			$fn.ajax({ ajax, ctx, ...props }).then(data=> {
				ctx.emit('getData', data)
			})
			
			watch( () => props.data, data => ajax.value.data = data )
			
			return {
				vn: $,
				onChange: (value, row) => {
					ctx.emit('update:value', value)
					ctx.emit('change', $fn.getFormFormat({...props, formType:'select', data:ajax.value.data }) )
					if( sname ){
						formRef.setValue({[sname]: row.children[0].children })
					}
				},
				filterOption: (input, option) => { 
					return option.props.children[0].children.indexOf(input) !== -1
					return option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
				},
				ajax
			}
		}
	}
</script>